<template>
 <div class="line">
    <div class="header">
        <span>{{header}}</span>
        <svg t="1696522443856" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7920" width="16" height="16">
            <path d="M512 96c-229.76 0-416 186.24-416 416s186.24 416 416 416 416-186.24 416-416-186.24-416-416-416zM577.248 665.056c-31.392 47.136-63.328 83.456-117.056 83.456-36.672-5.984-51.744-32.256-43.808-59.04l69.12-228.928c1.696-5.6-1.12-11.584-6.24-13.408-5.088-1.792-15.072 4.832-23.712 14.304l-41.792 50.272c-1.12-8.448-0.128-22.4-0.128-28.032 31.392-47.136 82.976-84.32 117.952-84.32 33.248 3.392 48.992 29.984 43.2 59.2l-69.6 230.048c-0.928 5.184 1.824 10.464 6.528 12.128 5.12 1.792 15.872-4.832 24.544-14.304l41.76-50.24c1.12 8.448-0.768 23.232-0.768 28.864zM567.936 366.048c-26.432 0-47.872-19.264-47.872-47.616s21.44-47.584 47.872-47.584 47.872 19.264 47.872 47.584c0 28.384-21.44 47.616-47.872 47.616z" p-id="7921" fill="#8a8a8a"></path>
        </svg>
    </div>

    <div class="body">
        <span class="body1">{{ body1 }}</span>
            <slot>
            </slot>
    </div>

    <div class="footer" ref="footer"></div>
 </div>
</template>

<script>
import * as echart from "echarts"
export default {
    //name: '',
    data(){
        return {
         }
    },
    props:["header","body1"],
    mounted(){
        let line=echart.init(this.$refs.footer);
        line.setOption({
            xAxis: {
              show:false,
              type: 'category',
            },
            yAxis: {
                show:false,
            },
            grid:{
                    top:10,
                    left:0,
                    right:0,
                    bottom:0
                },    
            series: 
              {
                type: 'line',
                data: [33,21,30,11,32,18,27,22,31,26],
                smooth: true,
                itemStyle:{
                    opacity:0
                },
                areaStyle:{
                    color:{
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [{
                          offset: 0, color: 'blue' // 0% 处的颜色
                      }, {
                          offset: 0.8, color: '#fff' // 100% 处的颜色
                      }],
                      global: false // 缺省为 false
                    }
                },
                lineStyle:{
                    color:"blue"
                }
              }
        })
    }
}
</script>

<style scoped>
.line{
    margin:  0px 15px;
    width: 300px;
}

.header span{
    margin-right: 15px;
    color: rgb(96, 95, 95);
}

.body{
    margin-top: 20px;
    color: rgb(96, 95, 95);
}

.body .body1{
    font-size: 25px;
    color: rgb(9, 9, 9);
    margin-right: 30px;
}

.footer{
    width: 100%;
    height: 50px;
}
</style>
